<style scoped lang="less"></style>
<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`"
             style="height: 120px;padding-bottom: 10px;">
        <infor-card :shadow="true" :color="infor.color" :icon="infor.icon" :icon-size="36">
          {{infor.count}}单—￥{{infor.amount/100}}
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Card shadow>
      <div ref="dom" style="height: 310px;"></div>
    </Card>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import { on, off } from '@/libs/tools'
  import {getActiveData} from '@/api/statistics'
  import InforCard from '_c/info-card'

  export default {
    name: 'active-statistics',
    data() {
      return {
        dom: null,
        inforCardData: null,
      };
    },
    components: {
      InforCard
    },
    created() {
      this.init();
    },

    beforeDestroy () {
      off(window, 'resize', this.resize)
    },
    methods: {
      setChartData (dates,amounts,counts) {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            top: '3%',
            left: '1.2%',
            right: '1%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: dates
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '订单数',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {
                  color: '#2d8cf0'
                } },
              data: counts
            },
            {
              name: '金额',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {
                  color: '#10A6FF'
                } },
              data: amounts
            }
          ]
        };
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.dom)
          this.dom.setOption(option)
          on(window, 'resize', this.resize)
        })
      },
      resize () {
        this.dom.resize()
      },
      init() {
        this.getData();
      },
      getData() {
        let vm = this;
        getActiveData(this.active_id).then(rep => {
          vm.formatData(rep.data.data.counts);
          vm.initChart(rep.data.data.bydate);

        })<template>
        <div>
        <!--	  <MyUeditor v-model="formData.content"></MyUeditor>-->
          <!--	  <Editor ref="froalaEditor" @on-change="changeContent" v-model="formData.content"></Editor>-->
          <Ossupload></Ossupload>
          <Row :gutter="20">
          <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
          <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          {{infor.count}}
      <p>{{ infor.title }}</p>
        </infor-card>
        </i-col>
        </Row>
        <Row :gutter="20" style="margin-top: 10px;">
          <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
          <Card shadow>
        <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
          </Card>
          </i-col>
          <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
          <Card shadow>
        <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
          </Card>
          </i-col>
          </Row>
          <Row>
          <Card shadow>
        <example style="height: 310px;"/>
          </Card>
          </Row>
          </div>
          </template>

          <script>
        import Ossupload from '../../../components/ossupload.vue'
        import MyUeditor from '../../../components/myueditor'
        import InforCard from '_c/info-card'
        import { ChartPie, ChartBar } from '_c/charts'
        import Example from './example.vue'
        export default {
          name: 'home',
          components: {
            InforCard,
            ChartPie,
            Ossupload,
            ChartBar,
            Example,
            MyUeditor,
          },
          data () {
            return {
              formData:{
                content:''
              },
              inforCardData: [
                { title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
                { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
                { title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
                { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
                { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
                { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
              ],
              pieData: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
              ],
              barData: {
                Mon: 13253,
                Tue: 34235,
                Wed: 26321,
                Thu: 12340,
                Fri: 24643,
                Sat: 1322,
                Sun: 1324
              }
            }
          },
          mounted () {

            // this.$nextTick(()=>{
            //
            //   console.log(this.formData.content)
            //
            //   this.$refs.froalaEditor.setHtml(this.formData.content)
            //
            // })
          },
          methods:{
            // changeContent (html) {
            //
            //   this.formData.content = html
            //
            //   // console.log(html)
            //
            // },
          }
        }
</script>

<style lang="less">
  .count-style{
    font-size: 50px;
  }
</style>

},
      initChart(data){
        let dates = [];
        let amounts = [];
        let counts = [];
        data.forEach(v=>{
          dates.push(v.date);
          counts.push(v.count);
          amounts.push(v.total_amount/100);
        });
        this.setChartData(dates,amounts,counts);
      },
      formatData(data) {
        let total = 0;//总计订单数
        let close = 0;//关闭订单数
        let closeAmount = 0;//关闭及退款金额
        let finished = 0;//完成订单数
        let finishedAmount = 0;//完成金额
        let unPay = 0;//未付款订单数
        let unPayAmount = 0;//未付款金额
        let payed = 0;//未核销订单数
        let payedAmount = 0;//未核销金额
        let exp = 0;//过期订单数
        let expAmount = 0;//过期金额
        let amount = 0;//总金额
        let vm = this;
        data.forEach(v => {
          total += v.count;
          amount += parseInt(v.total_amount);
          let result = vm.GLOBAL.getOrderStatus(v.pay_status, v.trade_status, null, 1);
          //订单类型 0 全部 1未付款 2待使用 3待收货 4待评价5已过期6已退款 10已关闭
          switch (result.status) {
            case 1:
              unPay += v.count;
              unPayAmount += parseInt(v.total_amount);
              break;
            case 2:
            case 3:
              payed += v.count;
              payedAmount += parseInt(v.total_amount);
              break;
            case 4:
              finished += v.count;
              finishedAmount += parseInt(v.total_amount);
              break;
            case 5:
              exp += v.count;
              expAmount += parseInt(v.total_amount);
              break;
            case 6:
            case 7:
            case 10:
              close += v.count;
              closeAmount += parseInt(v.total_amount);
              break;
          }
        });
        this.inforCardData = [
          {title: '总订单', icon: 'md-person-add', amount: amount, count: total, color: '#2d8cf0'},
          {title: '完成订单', icon: 'md-locate', amount: finishedAmount, count: finished, color: '#19be6b'},
          {title: '关闭(退款)订单', icon: 'md-help-circle', amount: closeAmount, count: close, color: '#ff9900'},
          {title: '未付款订单', icon: 'md-share', amount: unPayAmount, count: unPay, color: '#ed3f14'},
          {title: '过期订单', icon: 'md-chatbubbles', amount: expAmount, count: exp, color: '#E46CBB'},
        ];
      }
    }
  }
</script>